<template>
  <div class="SeverList-box">
    <div class="wash">
      <h3>{{title}}</h3>
      <span>/&nbsp;&nbsp;自洗串色变形，交给专业洗护</span>
      <p>></p>
    </div>
    <ul class="list">
      <li v-for="ig in lists" :key="ig.img">
        <img :src="ig.img" alt=""/>
        <p>{{ig.content}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "SeverList",
  props:["title"],
  data() {
    return {
      lists: [
        {
          img: require("../../../assets/imgs/list1_03.jpg"),
          content: "超级干净",
        },
        {
          img:require("../../../assets/imgs/list1_05.jpg"),
          content: "超级修复",
        },
        {
          img: require("../../../assets/imgs/list1_07.jpg"),
          content: "抽全年洗护",
        },
        {
          img: require("../../../assets/imgs/list1_09.jpg"),
          content: "洗鞋神奇",
        }
        ,{
          img: require("../../../assets/imgs/list1_15.jpg"),
          content: "洗鞋神奇",
        },{
          img: require("../../../assets/imgs/list1_17.jpg"),
          content: "洗鞋神奇",
        }
      ],
    };
  },
};
</script>

<style scoped>
.SeverList-box {
  width: 3.53rem;
  height: 1.37rem;
  margin: 0.1rem auto;
  background-color: #ffffff;
}
.wash {
  display: flex;
  height: 0.44rem;
  line-height: 0.44rem;
  margin-left: 0.17rem;
}
.wash h3 {
  margin-right: 0.13rem;
}
.wash span {
  font-size: 0.1rem;
  color: #636363;
}
.wash p {
  margin-left: 0.8rem;
  color: #636363;
  font-size: 0.14rem;
}
.list {
  height: 0.8rem;
  margin-top: 0.1rem;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
}
.list li {
  width: 0.56rem;
  height: 100%;
  margin: 0 0.17rem;
  text-align: center;
  float: 1;
}
.list li img {
  width: 0.56rem;
  height: 0.56rem;
}
.list li p {
  color: black;
  font-size: 0.1rem;
}
</style>